<template>
  <Modal v-model="modal2" :mask="false" :title="title" :footer-hide='true'>
    <Form ref="form" :model="mapInfo" :rules="ruleValidate" :label-width="110">
      <FormItem label="标记地址：" prop='vAddress' required>
        <input type="text" placeholder="请输入标记地址" id="place" v-on:input="mapclearlngFun"
          class="map_box_i ivu-input ivu-input-large" v-model="vAddress">
      </FormItem>
      <div class="tipsText">
        <Icon type="md-alert" class="tips_icon" />
        <span class="AssignCustomers_name">请输入地址并在下拉框中选择需在地图上显示的具体坐标</span>
      </div>
      <div style="position:relative;margin-bottom:15px;">
        <div class="map">
          <div id="mapBox" style="height:300px;"></div>
        </div>
      </div>
      <FormItem label="设置范围：" prop='range' required>
        <Input type="number" ref="adress" v-model="mapInfo.range" placeholder="请设置范围"></Input>
      </FormItem>
    </Form>

    <div class="footerMap">
      <Button type="primary" @click="onOk">确定</Button>
      <Button type="text" @click="hide">取消</Button>
    </div>

  </Modal>
</template>

<script>
  import common from '@/views/casemanagement/marketingCenter/build/components/info/opt/common.js'
  export default {
    data() {
      return {
        _index: null,
        modal2: false,
        title: '位置选择',
        mapInfo: {
          signAddress: '',
          latitude: '',
          longitude: '',
          range: '',
        },
        vAddress: '', // 标记地址
        ruleValidate: {
          vAddress: [{ required: true, message: '请输入地址', trigger: 'blur' }],
          range: [{ required: true, message: '请设置范围', trigger: 'blur' }],
        },
      }
    },
    watch: {
      vAddress(newVal) {
        this.mapInfo.signAddress = newVal
        this.vAddress = newVal
      },
    },
    mounted() {},
    created() {},
    methods: {
      mapclearlngFun() {
        this.mapInfo.latitude = ''
        this.mapInfo.longitude = ''
      },
      show(val, index) {
        this._index = index
        this.modal2 = true
        this.mapInfo.signAddress = val.signAddress
        this.mapInfo.latitude = val.latitude
        this.mapInfo.longitude = val.longitude
        this.mapInfo.range = val.scope
        this.vAddress = val.signAddress
        common.getBaidu(this)
      },
      hide() {
        this.modal2 = false
      },
      onOk() {
        let reg = /^[1-9]\d*$/
        let flag1 = !this.mapInfo.range
        let flag2 = !this.mapInfo.signAddress
        let flag3 = !reg.test(this.mapInfo.range)
        let flag4 = !this.mapInfo.latitude || !this.mapInfo.latitude
        if (flag2) {
          this.$Message.warning('请设置标记地址')
          return false;
        }
        if (flag1) {
          this.$Message.warning('设置范围不能为空')
          return false;
        }
        if (flag3) {
          this.$Message.warning('范围设置只能为正整数')
          return false
        }
        if (flag4) {
          this.$Message.warning('地址选择不正确，请重新选择')
          return false
        }
        if (!flag1 && !flag2 && !flag3) {
          this.mapInfo.signAddress = this.vAddress
          this.$emit('mapInfo', this.mapInfo, this._index)
          this.modal2 = false
        }
      },
    },
  }
</script>
<style scoped>
  .biaoJi {
    display: flex;
    flex-direction: row;
  }

  .tipsText {
    margin: 15px 0;
    text-align: center;
  }

  .footerMap {
    display: flex;
    border-top: 1px solid #dcdee2;
    padding-top: 20px;
    flex-direction: row-reverse;
  }
</style>
<style>
  .tangram-suggestion-main {
    z-index: 10990;
  }
</style>